<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>在线考试管理系统-添加题库</title>
    <div th:include="~{views/common/include :: cssStyle }"></div>
    <!-- 引入bootstrapmarkdown样式-->
    <link rel="stylesheet" th:href="@{/static/js/plugins/markdown/css/bootstrap-markdown.min.css}">
    <!--时间选择插件-->
    <link rel="stylesheet" th:href="@{/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}">
    <!--日期选择插件-->
    <link rel="stylesheet" th:href="@{/static/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}">
</head>
<body>
<div class="coder-layout-web">
    <div class="coder-layout-container">
        <!--左侧导航-->
        <div th:include="~{views/common/include :: #asideStyle }"></div>
        <!--End 左侧导航-->
        <!--头部信息-->
        <div th:include="~{views/common/include :: #headerStyle }"></div>
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="coder-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                            </div>

                            <!-- 修改表单 [start]-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="editQuestionModalLabel">新增题目:</h4>
                                </div>
                                <form id="questionForm" method="post">
                                    <div class="modal-body">
                                        <!-- 题目名称 name="id" 根据 id 修改内容 -->
                                        <div class="form-group">
                                            <label  class="control-label">题目名称: </label>
                                            <input type="text" class="form-control"  name="questionTitle" id="e_questionTitle">
                                        </div>
                                        <!-- 题目类型-->
                                        <div class="form-group">

                                            <label class="control-label">题目类型</label>
                                            <select class="form-control" onchange="editChangeType()"
                                                    id="e_typeId" name="typeId" size="1">
                                                <option value="">请选择类型</option>
                                                <option value="1">选择题</option>
                                                <option value="2">填空题</option>
                                                <option value="3">判断题</option>
                                                <option value="4">简答题</option>
                                            </select>

                                        </div>
                                        <!-- 切换选题区域-->
                                        <!-- 1.选择题选项-->
                                        <div class="form-group" id="e_choiceArea" style="display:none">
                                            <input type="text" class="form-control" placeholder="请输入选项A的内容"  name="optionA" id="e_optionA">
                                            <input type="text" class="form-control" placeholder="请输入选项B的内容"  name="optionB" id="e_optionB">
                                            <input type="text" class="form-control" placeholder="请输入选项C的内容"  name="optionC" id="e_optionC">
                                            <input type="text" class="form-control" placeholder="请输入选项D的内容"  name="optionD" id="e_optionD">
                                            <input type="text" class="form-control" placeholder="请输入问题正确答案" 
												   name="choiceAnswer" id="e_choiceAnswer" >
                                        </div>
										
                                        <!-- 2.填空题选项-->
                                        <div class="form-group" id="e_blankArea" style="display:none">
                                            <input type="text" name="blankAnswer" id="e_blankAnswer"
                                                   class="form-control" placeholder="请输入问题正确答案">
                                        </div>

                                        <!-- 3.判断题选项-->
                                        <div class="form-group" id="e_judgeArea" style="display:none">
                                            <div class="example-box">
                                                <label class="soulCoder-radio radio-inline radio-primary">
                                                    <input type="radio" name="judgeAnswer" id="trueOption" value="1"><span>正确</span>
                                                </label>
                                                <label class="soulCoder-radio radio-inline radio-primary">
                                                    <input type="radio" name="judgeAnswer" id="falseOption" value="0"><span>错误</span>
                                                </label>
                                            </div>
                                        </div>

                                        <!-- 4.简答题选项-->
                                        <div class="form-group" id="e_shortArea" style="display:none">
                                            老师到时候自行给分数
                                        </div>

                                        <!-- 5.设定分数-->
                                        <div class="form-group">
                                            <label  class="control-label">设定分数: </label>
                                            <input type="text" class="form-control" name="score" id="e_score">
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" onclick="javascript:history.back(-1)"
											data-dismiss="modal">返回</button>
                                        <button type="button" data-method='addSave'
											class="btn btn-primary">保存</button>
                                    </div>
                                </form>
                            </div>
                            <!-- 新增表单 [	END ] -->

                        </div>
                    </div>
                </div>
            </div>

        </main>

    </div>
</div>

<div th:include="~{views/common/include :: #jsStyle}"></div>
<script type="text/javascript" th:src="@{/static/js/jquery.serialize-object.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/my-ajax.js}"></script>
<script type="text/javascript" th:src="@{/static/js/confirm.js}"></script>


<div th:include="~{views/question/question_func :: #questionFunc}"></div>

<!--图表插件-->
<script type="text/javascript" th:inline="javascript">
    var ctxPath = [[${#httpServletRequest.getContextPath()}]];
    $(document).ready( function(e){
        //2.绑定事件
        $("button,a").on('click',function(){
            //获取到 a标签里面配置 data-method
            var mtdName = $(this).data('method');
            if( mtdName ){
                doMethod[ mtdName ]();
            }
        });
        //3.添加保存方法 [ addSave ]
        var doMethod = {
            addSave(){
                //1.获取表单里面参数.
                let formObj = getFormData("questionForm");
				//2.获取表单里面参数.
                postBODY({
                    url: ctxPath +"/Question/addQuestion",
                    data: formObj,
                    success:function( data ){
                        rescRESP(data, "新增");
                    }
                });
            }
        }
    });
</script>

<style>
    .md-header{
        margin-left: 0px;
    }
    .my-container {
        float: left;
        display: inline-block;
        margin-right:30px;
    }
    .myLabel-content ,.myText-content,.myBtn-content{
        float: left;
        display: inline-block;
        line-height: 40px;
        margin-left: 10px;
    }
    .myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
        height: 38px;
        font-size: 15px;
    }
    .myBtn-content .btn {
        margin-bottom: 10px;
        margin-right: 20px;
    }
</style>

</body>
</html>
